<template>
    <div>
        <el-drawer v-model="props.customDrawer" title="自定义模块" @close="handleCustomVisibleClose" size="50%">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabChange">
                <el-tab-pane v-for="item in customFrom.titleGroups" :key="item.languageId" :label="item.label"
                    :name="item.languageId">
                    <el-form ref="webCustomRef" :model="customFrom">
                        <el-form-item label="标题" prop="item.name">
                            <el-input v-model="item.name" placeholder="请输入" />
                        </el-form-item>
                        <el-form-item label="内容" prop="item.description">
                            <Editor v-model="item.description" :height="450" :showBlock="false"></Editor>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
            <div style="display: flex; justify-content: space-between">
                <el-button type="primary" size="large" style="width: 25%" @click="handleCustomSave">保存</el-button>
                <el-button type="primary" size="large" style="width: 25%" v-show="preview"
                    @click="handlePreview">预览</el-button>
                <el-button type="primary" plain size="large" style="width: 25%">取消</el-button>
            </div>
        </el-drawer>
        <el-dialog v-model="previewDialog" title="预览" @close="handlePreviewClose">
            <div v-html="Lodash.unescape(publicItem.description)" style="overflow: hidden;"></div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, onMounted, watch, reactive } from "vue";
const emits = defineEmits(["handleCustomVisibleClose"]);
const { proxy } = getCurrentInstance();
const sys_language_type = ref([]);
const activeName = ref(null);
const preview = ref(false);
const publicItem = ref({});
const detailsFrom = ref([]);
const detailsId = ref(null);
const previewDialog = ref(false);
const props = defineProps({
    customDrawer: {
        type: Boolean,
        default: false,
    },
    // 传值数据对象
    listItem: {
        type: Object,
        default: {},
    },
    websiteId: {
        type: String || Number, // 网站id
        default: null,
    },
});
const searchFrom = ref({
    pageNum: 1,
    pageSize: 10,
    param: {
        websiteId: Number(props.websiteId), //网站id
        moduleId: null, //模块id
        moduleType: "Custom",
    },
});
const customFrom = ref({
    sysTagType: "Custom",
    titleGroups: [],
    moduleId: null, //模块id：props.listItem.id
});
watch(
    () => props.customDrawer,
    () => {
        if (!props.customDrawer) return;
        getList();
    }
);
const handleCustomSave = () => {
    if (!proxy.publicArray(customFrom.value.titleGroups))
        return proxy.$modal.msgError("请完整填写");

    customFrom.value.titleGroups = customFrom.value.titleGroups.map((e) => {
        return {
            ...e,
            description: encodeURIComponent(e.description),
        };
    });
    customFrom.value.moduleId = props.listItem.id;
    if (preview.value) {
        //编辑
        site.moduleline
            .sitewebsitemodulelineUpdate({
                pathParams: {
                    id: detailsId.value,
                },
                data: customFrom.value,
            })
            .then((res) => {
                if (res.code === 200) {
                    getList();
                    proxy.$message.success(res.message);
                }
            })
    } else {
        //新增
        site.moduleline
            .sitewebsitemodulelineAdd({
                data: customFrom.value,
            })
            .then((res) => {
                if (res.code === 200) {
                    proxy.$message.success(res.message);
                    getList();
                }
            });
    }
};
const getList = () => {
    searchFrom.value.param.moduleId = props.listItem.id;
    site.moduleline
        .sitewebsitemodulelineList({
            data: searchFrom.value,
        })
        .then((res) => {
            customFrom.value.titleGroups = [];
            if (res.data?.length) {
                detailsId.value = res.data[0].id
                site.moduleline
                    .sitewebsitemodulelineGetbyid({
                        pathParams: {
                            id: detailsId.value,
                        },
                    })
                    .then((resDetails) => {
                        preview.value = true;
                        activeName.value =
                            resDetails.data.moduleDescriptions[0]?.languageId;
                        resDetails.data.moduleDescriptions.forEach((e) => {
                            customFrom.value.titleGroups.push({
                                languageId: e.languageId,
                                label: sys_language_type.value.find(
                                    (code) => code.id === e.languageId
                                )?.description,
                                name: e.name, //标题
                                description: decodeURIComponent(e.description),
                            });
                        });
                        publicItem.value = customFrom.value.titleGroups[0]
                        detailsFrom.value = customFrom.value.titleGroups;
                    });
            } else {
                site.general
                    .sitewebsiteGetbyid({
                        pathParams: {
                            id: Number(props.websiteId),
                        },
                    })
                    .then((basicsRes) => {
                        if (basicsRes.code === 200) {
                            preview.value = false;
                            activeName.value = basicsRes.data.languageIds[0];
                            basicsRes.data.languageIds.forEach((e) => {
                                customFrom.value.titleGroups.push({
                                    languageId: e,
                                    label: sys_language_type.value.find((code) => code.id === e)
                                        ?.description,
                                    name: "", //标题
                                    description: "",
                                });
                            });
                            // console.log(basicsRes.data, 555151515);
                        }
                    });
            }
        });
};
const handleCustomVisibleClose = () => {
    emits("handleCustomVisibleClose");
};
onMounted(() => {
    getLanguage();
});
// 语言列表
const getLanguage = () => {
    product.language.languageList().then((res) => {
        sys_language_type.value = res.data;
    });
};
const tabChange = (e) => {
    if (!preview.value) return
    publicItem.value = detailsFrom.value.find(code => code.languageId === e)
};
const handlePreview = () => {
    previewDialog.value = true
};
const handlePreviewClose = () => {
    previewDialog.value = false
}
</script>